<template>
  <div class="document-box-header">
    <div></div>
    <a-button
      type="text"
      class="icon-only-btn button-padding"
      @click.stop="handleToDownload(propValue?.introduceUrl, propValue?.introduceName)"
      ><i class="iconfont icon-download-2-line" style="color: #1868e9"></i>下载文档</a-button
    >
  </div>
  <div class="project-content">
    <preview-pdf v-if="propValue && propValue.introducePDFUrl" :url="(propValue?.introducePDFUrl as string)" is-height-auto />
  </div>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { debounce } from 'g6-fn'

  import manualMessage from '@/components/ManualMessage'
  import PreviewPdf from '@/components/PreviewPdf/index.vue'
  import { fetchDownload, minioApi } from '@/services/api'
  import { waitLoading } from '@/utils'

  import { DetailType } from '../types'
  export interface PropType {
    propValue?: DetailType
  }
  withDefaults(defineProps<PropType>(), {})

  //下载
  const handleToDownload = debounce(async (dataUrl: string, dataFileName: string): Promise<void> => {
    // console.log(dataUrl, dataFileName)
    try {
      const { data } = await minioApi.download({ fileName: dataUrl })
      waitLoading<ResponseData<any>>(fetchDownload(data, dataFileName), {
        loadingText: '数据准备中,请耐心等待...',
        errorText: '文件下载失败',
        successText: '文件下载成功'
      })
    } catch (error) {
      manualMessage.destroy()
      message.error({ content: '文件下载失败', key: 'downloading', duration: 2 })
    }
  }, 500)
</script>

<style lang="less" scoped>
  .document-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    background: @background1;
    align-self: stretch;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;

    .button-padding {
      padding: 7px 16px;
      gap: 6px;
      color: #1868e9;
    }
  }

  .project-content {
    display: flex;
    align-items: flex-start;
    height: 100%;
    min-height: 500px;
    background: #fff;
    border: 1px solid #e8e9eb;
    border-top-width: 0;
    border-radius: 0 0 10px 10px;
    flex-direction: column;
  }
</style>
